<template>
  <div id="banner">
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="banner in banner_list" :key="banner.id">
                <img :src="'http://127.0.0.1:3000'+banner.img">
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import 'swiper/dist/css/swiper.min.css'
import axios from "../utils/http"
export default {
    created(){
        this.get_banner()
    },
    data(){
        return {
            banner_list: []
        }
    },
    methods :{
        get_banner(){
            axios.get("/getbanner").then(res=>{
                this.banner_list = res.list
            })
        }
    },
    mounted(){
        new Swiper('.swiper-container',{
            loop: true,//循环轮播
            autoplay: {
                delay: 500 //毫秒
            },
            effect: 'cute'
        });
    }
}
</script>

<style scoped>
.swiper-slide>img{
    width: 360px;
    height: 155px;
}
</style>